<script>
import {quillEditor} from 'vue-quill-editor';
import 'quill/dist/quill.core.css'; // import styles
import 'quill/dist/quill.snow.css'; // for snow theme
import 'quill/dist/quill.bubble.css'; // for bubble theme
export default {
  components: {
    quillEditor
  },
  data() {
    const userJson = localStorage.getItem("user");
    let userId = '';
    let status = ''
    if (userJson) {
      const user = JSON.parse(userJson);
      userId = user.id;
      status = user.status
    }
    return {
      dataForm: {
        articleTitle: '',
        articleContent: '',
        teacherName: userId,
        typeName: '',
        articleHover: '',
        articleDescription: ''
      },
      typeOption: [],
      dataRule: {
        articleTitle: [
          {required: true, message: '文章标题不能为空', trigger: 'blur'}
        ],
        articleContent: [
          {required: true, message: '文章内容不能为空', trigger: 'blur'}
        ],
        typeName: [
          {required: true, message: '文章类型不能为空', trigger: 'blur'}
        ],
        articleHover: [
          {required: true, message: '文章封面不能为空', trigger: 'blur'}
        ],
        articleDescription: [
          {required: true, message: '文章描述不能为空', trigger: 'blur'}
        ],

      }
    }
  },
  created() {
    this.getArticleType()
  },
  methods: {
    getArticleType() {
      this.request.get('/article/articletype/findArticleTypeList')
          .then(res => {
            if (res.code === 0) {
              console.log(res.articleTypeList, 'sadsad');
              this.typeOption = res.articleTypeList;
            } else {
              this.typeOption = [];
            }
          })

    },
    handlePreview(file) {
      console.log(file);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dataForm.articleHover = file.url;
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUploadSuccess(res, file) {
      console.log(res, 'res')
      console.log(file, 'file')
      this.dataForm.articleHover = res.msg

      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      console.log(file.type, 'file')
      const isJPG = file.type === 'image/jpeg';
      const isPng = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPng) {
        this.$message.error('上传头像图片只能是 JPG或PNG格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isPng) && isLt2M;
    },
    dataFormSubmit(){
      this.request.post('/article/article/save',this.dataForm)
          .then(res=>{
              if (res.code===200){
                this.$message.success(res.message);
                this.$router.push('/article')
              }else if (res.code===400){
                this.$message.error(res.message);

              }
          })
    }
  }
}
</script>

<template>
  <div class="container">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="200px" style="margin-top: 10px">
      <el-form-item label="文章标题" prop="articleTitle">
        <el-input style="width: 800px" v-model="dataForm.articleTitle" placeholder="请输入文章标题"></el-input>
      </el-form-item>

      <el-form-item label="文章封面" prop="articleHover">
        <div class="avatar-container">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8888/api/minio/upload"
              :show-file-list="false"
              :on-preview="handlePictureCardPreview"
              :on-success="handleUploadSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img style="width: 150px;height: 150px" v-if="dataForm.articleHover" :src="dataForm.articleHover"
                 class="avatar" alt="">
            <el-button v-else size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </el-form-item>


      <el-form-item label="文章内容" prop="articleContent">
        <div>
          <div style="width: 800px;height: 100%">
            <quill-editor v-model="dataForm.articleContent" style="height: 400px"></quill-editor>
          </div>
        </div>
      </el-form-item>

      <el-form-item style="margin-top: 110px" label="文章描述" prop="articleDescription">

        <el-input
            type="textarea"
            placeholder="请输入文章描述"
            v-model="dataForm.articleDescription"
            maxlength="200"
            rows="3">
        </el-input>
      </el-form-item>


      <el-form-item label="文章类型" prop="typeName" style="margin-top: 20px">
        <el-select v-model="dataForm.typeName" placeholder="请选择文章类型">
          <el-option
              v-for="item in typeOption"
              :key="item.id"
              :label="item.articleTypeName"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <span class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">发布</el-button>
      </span>
    </el-form>

  </div>
</template>


<style scoped>
.container {
  background-color: #fff;
  height: 100%;
  width: 1200px;
  margin-left: 200px;
  position: relative;
  display: flex;
  flex-direction: column; /* 使用列布局 */
  justify-content: space-between; /* 使子元素在容器中垂直方向上分布均匀 */
}

/* 将表单内容放在容器的上半部分 */


/* 将按钮放在底部 */
.dialog-footer {
  display: flex;

  justify-content: center;
  margin-bottom: 15px;
}
</style>